<template>
  <el-dialog v-model="isShow" title="选择站内内容" width="960px">
    <div class="content-link-box">
      <div class="left-category">
        <div class="site-title">
          <i class="iconfont">&#xeb49;</i>
          <p :title="currentSite.title">
            {{currentSite.title}}
          </p>
        </div>
        <div class="category-box">
          <el-scrollbar>
            <el-tree
                class="category-tree"
                :data="categoryTree"
                :props="defaultProps"
                ref="categoryTree"
                @node-click="handleChooseCategory"
                node-key="id"
            >
              <template #default="{ node }">
                <div class="label-title">
                  <i class="iconfont">&#xe6a7;</i>
                  <p :title="node.label">{{node.label}}</p>
                </div>
              </template>
            </el-tree>
          </el-scrollbar>
        </div>
      </div>
      <div class="right-content">
        <div class="search-title clearfix">
          <el-input class="keywords-search" v-model="queryData.title" placeholder="输入内容标题或正文关键词" @keydown.enter="handleSearchContent">
            <template #suffix>
              <i class="iconfont" @click="handleSearchContent">&#xe643;</i>
            </template>
          </el-input>
        </div>
        <div class="content-table-box">
          <el-scrollbar>
            <el-table
                ref="tableRef"
                :data="tableData"
                highlight-current-row
                @current-change="handleChooseContent"
            >
              <el-table-column width="60">
                <template #default="{ row }">
                  <el-checkbox v-model="row.checked" :disabled="!!row.islink"/>
                </template>
              </el-table-column>
              <el-table-column prop="title">
                <template #default="{ row }">
                  <p class="content-title" :class="{'is-disabled': row.islink}">{{row.title?.replace(/<[^>]+>/g,"")}}</p>
                </template>
              </el-table-column>
              <el-table-column prop="publish_time" width="160">
                <template #default="{ row }">
                  <p class="content-time" :class="{'is-disabled': row.islink}">{{row.publish_time}}</p>
                </template>
              </el-table-column>
            </el-table>
          </el-scrollbar>
          <el-pagination
              style="float: right;"
              background layout="prev, pager, next"
              @current-change="handleCurrentChange"
              :total="queryData.total"
              v-model:current-page="queryData.currentPage"
              v-model:page-size="queryData.pageSize"/>
        </div>
      </div>
    </div>
    <template #footer>
        <span class="dialog-footer">
            <el-button @click="isShow = false">取消</el-button>
            <el-button type="primary" @click="submitLink">
            确认
            </el-button>
        </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { computed, reactive, ref } from "vue";
import { useStore } from "vuex"
import {getContentPage} from "@/api/content";
import {ElMessage} from "element-plus";

const store = useStore()
const currentSite = computed(() => store.state.site.currentSite)
// eslint-disable-next-line no-unused-vars
const categoryTree = computed(() => store.state.category.categoryTree.filter(item => item.siteId === currentSite.value.id))
const props = defineProps({
  showLinkTabs: {
    type: Boolean,
    default: false
  }
})
const defaultProps = {
  children: 'children',
  label: 'name',
  class: function (data,node){
    if(node.isLeaf){
      if(data.type !== 1 || Number(data.is_call_other) === 1) return 'is-leaf no-lists'
      else return 'is-leaf'
    }
  }
}
const emit = defineEmits(['update:showLinkTabs','handleLink'])
const isShow = computed({
  get: () => props.showLinkTabs,
  set: (val) => {
    emit('update:showLinkTabs',val)
  }
})
const tableLoading = ref(false)
const defaultQuery = reactive({
  pageSize: 10,
  currentPage: 1,
  catId: 0
})
const queryData = reactive(Object.assign({},defaultQuery))
const total = ref(0)
const tableData = ref([])
const handleChooseCategory = (data,node) => {
  if(node.isLeaf && data.type === 1){
    Object.assign(queryData,defaultQuery)
    queryData.catId = data.id
    handleSearchContent()
  }
}
const currentContent = ref({})
const handleSearchContent = async () => {
  tableLoading.value = true
  let res = await getContentPage(queryData)
  filterTableList(res.data.list)
  total.value = res.data.total
  tableLoading.value = false
}
const filterTableList = (list) => {
  tableData.value = list.map(ele => {
    if(currentContent.value.id && ele.id === currentContent.value.id){
      ele.checked = true
    }else{
      ele.checked = false
    }
    return ele
  })
}
const handleCurrentChange = () => {
  handleSearchContent()
}
const handleChooseContent = (val) => {
  if(!val.islink){
    currentContent.value = JSON.parse(JSON.stringify(val))
    filterTableList(tableData.value)
  }
}
const submitLink = () => {
  if(!currentContent.value.url){
    ElMessage({
      showClose: true,
      message: '请选择内容',
      type: 'warning',
    })
  }else{
    emit('handleLink', currentContent.value)
  }
}
</script>

<style scoped lang="scss">
.content-link-box{
  height: 500px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  .left-category{
    width: 440px;
    .site-title{
      display: flex;
      align-items: center;
      width: 100%;
      margin-bottom: 20px;
      i{
        font-size: 24px;
        margin-right: 10px;
        color: $mainColor;
      }
      p{
        font-size: 16px;
        @include textEllipsis(18px, 1);
      }
    }
    .category-box{
      height: 440px;
      background-color: #F6F6F6;
      .el-tree{
        background-color: transparent;
      }
      .is-leaf .label-title i{
        visibility: hidden;
      }
      .label-title{
        display: flex;
        align-items: center;
        i{
          margin-right: 5px;
        }
      }
      .no-lists{
        ::v-deep(.el-tree-node__content){
          cursor: not-allowed;
        }
        .label-title{
          color: #AAAAAA;
        }
      }
    }
  }
  .right-content{
    width: 440px;
    .search-title{
      .keywords-search{
        width: 320px;
        float: right;
        i{
          cursor: pointer;
          color: $mainColor;
        }
      }
    }
    .content-table-box{
      height: 417px;
      ::v-deep(.el-table__row){
        cursor: pointer;
      }
      .content-title{
        font-size: 14px;
        @include textEllipsis(16px,1);
      }
      .content-title.is-disabled{
        color: #C9C9C9;
      }
      .content-time{
        font-size: 14px;
        color: #AAAAAA;
      }
      .content-time.is-disabled{
        color: #C9C9C9;
      }
      .el-table .cell{
        line-height: 16px;
      }
      .el-checkbox{
        height: 16px;
      }
    }
  }
}
</style>
